<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	
	<meta name="viewport" content="width=device-width,initial-scale=1">
	
	<style>
		html,body{
			margin:0;
			padding: 0;
			overflow: auto;	
		}
		#mycanvas_container{
			overflow: scroll;		
		}
	</style>
	</head>
	<body>
		<div id="mycanvas_container"></div>
	</body>
	<script type="module">	
		import jmGraph from "../../index.js";
        var container = document.getElementById('mycanvas_container');
        
        //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
		var g = jmGraph.create('mycanvas_container', {
			width: 800,
			height: 600,
			mode: '2d',
			autoRefresh: true,
			style: {
				fill: '#000'
			}
		});

		init(g);
		
			
		function init(g){
			//g.style.fill = '#000'; //画布背景
			var style = {
                stroke: '#ccc',
                fill: 'yellow',
                lineWidth: 4, //边线宽
				rotation: {
					angle: 0
				}
			};
			//style.opacity = 0.2;		

			//创建一个椭圆
            var arc1 = g.createShape('arc', {
                style: style,
                center: {x:100, y:150},
                width: 120,
                height: 80
            });	
			g.children.add(arc1);  	
			arc1.canMove(true); 
			
			
            
            //实圆 
            style =  g.util.clone(style);
            style.stroke = 'red';
            //创建一个全圆
            var arc2 = g.createShape('arc', {
                style: style,
                center: {x:280, y:150},
                radius: 50
            });	
            g.children.add(arc2);   
            
            //圆弧
            style = g.util.clone(style);
            style.stroke = 'green';
            delete style.fill;//圆弧不设为实心
            //创建一个圆弧
            var arc3 = g.createShape('arc', {
                style: style,
                center: {x:400, y:150},
                start: 0,
                end: Math.PI / 2,
                radius: 50
            });	

            g.children.add(arc3);  
            var arc4 = g.createShape('arc', {
                style: style,
                center: {x:540, y:150},
                start: 0,
                end: Math.PI / 2,
                radius: 50,
                anticlockwise: true //顺时针
            });	
			g.children.add(arc4);   
			
			//这种个是直接调用canvas画的，性能会好一点
            var circle = g.createShape('circle', {
                style: style,
                center: {x:200, y:400},
                radius: 50
            });	
			g.children.add(circle);   
			
			//圆环
			style = g.util.clone(style);
			style.fill = 'blue';
			style.close = true; //如果是满圆，即end = Math.PI*2 时，把这个设为false
            var harc = g.createShape('harc', {
                style: style,
				center: {x:400, y:400},
				minRadius: 40,
				maxRadius: 80,
				start: 0,
				end: Math.PI / 4,
				anticlockwise: true //false  顺时针，true 逆时针
            });	
            g.children.add(harc);  
			harc.canMove(true); 
            
			g.on('update', (time) => {
				style.rotation.angle += 0.01;
				g.needUpdate = true;
			});
		}
	</script>
</html>